import { Button, Input, Select } from 'antd'
import axios from 'axios'
import React, { useState } from 'react'
import md5 from 'md5'
import { useTranslation } from 'react-i18next'

function Index() {

  const [list, setList] = useState<any>('')
  const [data, setData] = useState<any>('')
  const [mub, setMub] = useState<any>('')


  const fanyi = () => {

    const salt = new Date().getTime()
    axios.get('/api/api', {
      params: {
        q: list,
        from: 'auto',
        to: mub,
        appKey: "0dec814e0f1a9b5d",
        salt,
        sign: md5(`0dec814e0f1a9b5d${list}${salt}5AIwk5laKXjf58GPRShdyuf0QAPn3TTd`)
      }
    }).then((res) => {
      console.log(res);
      setData(res.data.translation[0])
    })
  }

  const [t, i18n] = useTranslation()

  return (
    <div>
      <Input style={{ width: '200px' }} value={list} onChange={(e) => setList(e.target.value)} />


      <Select
        defaultValue="zh"
        style={{ width: 120 }}
        value={mub}
        onChange={(value) => {
          setMub(value)
        }}
        options={[
          { value: 'zh', label: '中' },
          { value: 'en', label: '英' },
        ]}
      />
      <Button onClick={fanyi}>翻译</Button>
      <p></p>
      {data}

      {t('home')}


      <Select
        value={i18n.language}
        style={{ width: 120 }}
        onChange={(value) => i18n.changeLanguage(value)}
        options={[
          { value: 'zh', label: 'Jack' },
          { value: 'en', label: 'Lucy' },
        ]}
      />
    </div>
  )
}

export default Index